<%@ include file="base.jsp" %>
<%@ page isELIgnored ="true" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
<title>Insert title here</title>
<script type="text/javascript">
	$(document).ready(function() {
		$('#p').panel({  
			  width:500,  
			  height:150,  
			  title: 'My Panel',  
			  tools: [{  
			    iconCls:'icon-add',  
			    handler:function(){alert('new')}  
			  },{  
			    iconCls:'icon-save',  
			    handler:function(){alert('save')}  
			  }]  
			}); 
		$('#tt').tabs({  
		    border:false,  
		    onSelect:function(title){  
		        alert(title+' is selected');  
		    }  
		});
		// add a new tab panel  
		$('#tt').tabs('add',{  
		    title:'New Tab',  
		    content:'Tab Body',  
		    closable:true,  
		    tools:[{  
		        iconCls:'icon-mini-refresh',  
		        handler:function(){  
		            alert('refresh');  
		        }  
		    }]  
		}); 
	});
	$('#p').panel('move',{  
		  left:100,  
		  top:100  
		});   
</script>
</head>
<body>
	<div id="p" style="padding:10px;">  
	    <p>panel content.</p>  
	    <p>panel content.</p>  
	</div> 
	<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">  
    <div title="Tab1" style="padding:20px;display:none;">  
        tab1  
    </div>  
    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">  
        tab2  
    </div>  
    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">  
        tab3  
    </div>  
</div>
</body>
</html>